/*
 * @Author: xuchao 
 * @Date: 2018-05-16 14:10:53 
 * @Last Modified by: xuchao
 * @Last Modified time: 2018-06-08 16:05:57
 */
import React, { Component } from 'react';
import { Layout } from 'antd';
import './style.less';

export default class Service extends Component {
    constructor(props){
        super(props)
        this.state = {
            list: [{
                name: 'IGuard网页防篡改系统',
                tit: 'Guard网页防篡改系统（以下简称iGuard）是保护Web网站不被黑客篡改，并自动恢复被篡改内容的Web页面保护软件',
                time: '2018-05-20',
                download: 5,
                page: '4'
            }, {
                name: 'iWall应用防火墙',
                tit: 'iWall应用防火墙对常见的注入式攻击、跨站攻击、访问敏感文件、不安全本地存储、非法执行脚本、非法执行系统命令、资源盗链',
                time: '2018-05-18',
                download: 3,
                page: '2'
            }, {
                name: 'iAudit应用行为审计系统',
                tit: 'iAudit采用旁路部署方式，侦听交换机镜像端口的流量，采集所有对Web应用系统访问的数据包，还原出完整的HTTP协议信息',
                time: '2018-05-16',
                download: 11,
                page: '3'
            }, {
                name: 'nSync文件同步系统',
                tit: 'nSync 文件同步系统（ 以下简称nSync） 是一个多节点跨平台实时文件同步系统， 它实现了在本地集群及广域网环境下的跨平台',
                time: '2018-05-14',
                download: 6,
                page: '1'
            }, {
                name: 'iFlow在线业务交互防护系统',
                tit: 'Flow在线业务交互防护系统的本质就是将需要修改应用程序设计架构或代码来解决的安全问题，通过外部的软硬件安',
                time: '2018-05-12',
                download: 3,
                page: '10'
            }]
        }
    }

    render() {
        const { list } = this.state;
        return (
            <Layout.Content className="service">
                <div className="banner animated fadeIn">
                    <div className="search">
                        <input type="text" placeholder="请输入关键词" />
                        <button>
                            <i />搜索
                        </button>
                    </div>
                </div> 
                <div className="type">
                    <ul>
                        <li>
                            <em>技术：</em>
                            <div className="list">
                                <span>数据安全</span>
                                <span>边界安全</span>
                                <span>内网安全</span>
                                <span className="active">Web安全</span>
                                <span>业务安全</span>
                                <span>病毒安全</span>
                                <span>远程接入</span>
                                <span>完整性安全</span>
                                <span>完全审计</span>
                                <span>安全运维</span>
                                <span>态势感知</span>
                                <span>安全监控</span>
                                <span>终端安全</span>
                                <span>漏洞扫描</span>
                                <span>配置核查</span>
                                <span>检查工具箱</span>
                            </div>
                        </li>
                        <li>
                            <em>行业：</em>
                            <div className="list">
                                <span>电子政务</span>
                                <span>工控生产</span>
                                <span>制造型企业</span>
                                <span>电子商务</span>
                                <span>网络游戏</span>
                                <span>互联网增值服务</span>
                                <span>运营商</span>
                                <span className="active">网络安全</span>
                            </div>
                        </li> 
                        <li>
                            <em>品牌：</em>
                            <div className="list">
                                <span>天融信</span>
                                <span>启明星辰</span>
                                <span>网御星云</span>
                                <span className="active">天存</span>
                                <span>冠辰</span>
                                <span>东软</span>
                                <span>神州数码</span>
                                <span>齐治</span>
                                <spam>安恒</spam>
                                <span>绿盟</span>
                                <span>爱数</span>
                                <span>EMC</span>
                                <span>NetAPP</span>
                                <span>惠普</span>
                                <span>联想</span>
                                <span>清华紫光</span>
                                <span>华为</span>
                                <span>H3C</span>
                                <span>锐捷</span>
                                <span>深信服</span>
                                <span>戴尔</span>
                                <span>亿赛通</span>
                                <span>绿盾</span>
                                <span>梆梆安全</span>
                                <span>赛门铁克</span>
                                <span>卡巴斯基</span>
                                <span>瑞星</span>
                                <span>东方微点</span>
                            </div>
                        </li>  
                    </ul>
                </div>
                <ul>
                    {
                        list && list.map((item, index) => {
                            return (
                                <li key={index}>
                                    <i className="word" />
                                    <div className="info">
                                        <h1>{item.name}</h1>
                                        <p>{item.tit}</p>
                                        <p>
                                            <span>{item.time}</span>
                                            <span>{item.download}次下载</span>
                                            <span>共{item.page}页</span>
                                            <span>由天存提供</span>
                                        </p>
                                    </div>
                                </li>
                            )
                        })
                    }
                </ul>
            </Layout.Content>
        );
    }
}